window.addEventListener('load', function() {
    // alert('1');
    // 获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    // 获得focus宽度
    var w = focus.offsetWidth;
    var ol = focus.children[1];
    // 利用定时器自动轮播图片
    var index = 0;
    var timer = setInterval(function(){
        index++;
        var translateX = -index * w;
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX('+translateX+'px)';
    },2000);
    // 等过渡完成之后，再去判断，监听过渡的事件，transitionend
    ul.addEventListener('transitionend',function(){
        // 无缝滚动
        if(index >= 3){
            index = 0;
            // 去掉过渡，让ul回到目标位置
            ul.style.transition = 'none';
            // 利用最新索引号乘以宽度，去滚动图片
            var translateX = -index * w;
            ul.style.transform = 'translateX('+translateX+'px)';
        }else if(index < 0){
            index = 2;
            ul.style.transition = 'none';
            var translateX = -index * w;
            ul.style.transform = 'translateX('+translateX+'px)';
        }
        // 圆点跟随变化效果
        ol.querySelector('.current').classList.remove('current');
        ol.children[index].classList.add('current');
    });

    // 手指滑动轮播图
    var startX = 0;
    var moveX = 0; //后面会使用移动距离，定义全局变量
    var flag = false;
    ul.addEventListener('touchstart',function(e){
        startX = e.targetTouches[0].pageX;
        // 手指触摸时候停止定时器
        clearInterval(timer);
    });

    ul.addEventListener('touchmove',function(e){
        // 计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // 移动盒子： 盒子原来位置+手指移动距离
        var translateX = -index * w + moveX;
        // 手指拖动不需要动画即不需要过渡效果
        ul.style.transition = 'none';
        ul.style.transform = 'translateX('+translateX+'px)';
        flag = true; //如果用户手指移动过再去判断否则不做判断
        e.preventDefault(); //阻止滚动屏幕行为
    });

    //手指离开，根据移动距离去判断是回弹还是播放上一张下一张 
    ul.addEventListener('touchend',function(e){
        if(flag){
            // 如果移动距离大于50px就播放上或下一张
        if(Math.abs(moveX) > 50){ //取绝对值Math.abs（）
            //如果右滑就是播放上一张，moveX是正值
            if(moveX > 0){
                index--;
            }else{
                //如果是左滑就是下一张，moveX是负值
                index++;
            }
            var translateX = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX('+translateX+'px)';
        }else{
            // 如果移动距离小于50像素我们就回弹
            var translateX = -index * w;
            ul.style.transition = 'all .1s';
            ul.style.transform = 'translateX('+translateX+'px)';
        }
        }
        // 手指离开重启定时器
        clearInterval(timer);
        timer = setInterval(function(){
            index++;
            var translateX = -index * w;
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX('+translateX+'px)';
        },2000);
    });

    // 返回顶部模块
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    window.addEventListener('scroll',function(){
        if(window.pageYOffset >= nav.offsetTop){
            goBack.style.display = 'block';
        }else{
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click',function(){
        window.scroll(0,0);
    }) 
})